<template>
  <div class="text-center">
    Order page
    <div class="max-w-4xl mx-auto sm:px-6 lg:px-8">
      <a-radio-group v-model="form.resource1">
        <div v-for="(item,index) in 5" :key="index">
          <NuxtLink :to="{name:'order-id',params:{id:getUrl(item, 1)}}">
            <a-radio value="1">
              {{ item }}
            </a-radio>
          </NuxtLink>
        </div>
      </a-radio-group>
      <a-radio-group v-model="form.resource2">
        <div v-for="(item,index) in 5" :key="index">
          <NuxtLink :to="{name:'order-id',params:{id:getUrl(item, 1)}}">
            <a-radio value="1">
              {{ item }}
            </a-radio>
          </NuxtLink>
        </div>
      </a-radio-group>
      <a-radio-group v-model="form.resource3">
        <div v-for="(item,index) in 5" :key="index">
          <NuxtLink :to="{name:'order-id',params:{id:getUrl(item, 1)}}">
            <a-radio value="1">
              {{ item }}
            </a-radio>
          </NuxtLink>
        </div>
      </a-radio-group>
      <a-radio-group v-model="form.resource4">
        <div v-for="(item,index) in 5" :key="index">
          <NuxtLink :to="{name:'order-id',params:{id:getUrl(item, 1)}}">
            <a-radio value="1">
              {{ item }}
            </a-radio>
          </NuxtLink>
        </div>
      </a-radio-group>
      <a-radio-group v-model="form.resource5">
        <div v-for="(item,index) in 5" :key="index">
          <NuxtLink :to="{name:'order-id',params:{id:getUrl(item, 1)}}">
            <a-radio value="1">
              {{ item }}
            </a-radio>
          </NuxtLink>
        </div>
      </a-radio-group>

      <section class="container">
        <NuxtLink class="button" :to="{name:'order-id',params:{id:currentUrl}}"> OrderDetail/：id page </NuxtLink>
        <NuxtLink class="button" :to="{name:'order-id',query:{ keyword:'whosyourdead'}}"> OrderDetail/xxx page </NuxtLink>
      </section>
    </div>
  </div>
</template>

<script>
import { FormModel, Button } from 'ant-design-vue'
export default {
  component: {
    FormModel, Button
  },
  data() {
    return {
      currentUrl: '',
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {
        resource1: '',
        resource2: '',
        resource3: '',
        resource4: '',
        resource5: '',
      },
    }
  },
  computed: {
    getUrl() {
      return function(item, index) {
        const data = Object.values(this.form)
        data[index] = item
        return `${data.join('_')}.html`
      }
    }
  },
  fetch() {

  },
  activated() {
    fetch()
  },
  methods: {
    handleChange(item) {
      console.log(item);
    },
    onSubmit() {
      const {resource1, resource2, resource3, resource4, resource5} = {
        ...this.form
      }
      this.currentUrl = `${resource1}_${resource2}_${resource3}_${resource4}_${resource5}.html`
      console.log('submit!', this.currentUrl);
    },
  }
}

</script>

<style scoped>
.text-center{
  text-align: center;
}
</style>
